<template>
  <div>
    <div class="appcnter">
      <div class="cent">
        <div class="posire">
          <i class="el-icon-caret-left"></i>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }"
              >订单中心</el-breadcrumb-item
            >
            <el-breadcrumb-item><a href="/">查看订单</a></el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <div class="head">
          <el-form :model="queryParams" ref="queryForm" :inline="true">
            <el-form-item label="商城名称" prop="value ">
              <el-select
                v-model="queryParams.value"
                placeholder="请选择商城名称"
                @change="shopping()"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="手机号" prop="input ">
              <el-input
                v-model="queryParams.input"
                placeholder="请输入手机号"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="订单号" prop="input ">
              <el-input
                v-model="queryParams.input"
                placeholder="请输入订单号"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="订单状态" prop="value ">
              <el-select
                v-model="queryParams.value"
                placeholder="请选择订单状态"
                @change="shopping()"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-button class="btn" icon="el-icon-search"> </el-button>
            <el-button class="btnrefresh" icon="el-icon-refresh"> </el-button>
          </el-form>
        </div>

        <div class="table">
          <el-table
            :data="tableData"
            height="500"
            border
            style="width: 100%; text-align: center"
            :header-cell-style="getRowClass"
          >
            <el-table-column prop="ID" label="ID" width="150">
            </el-table-column>
            <el-table-column prop="name" label="主订单号" width="380">
            </el-table-column>
            <el-table-column prop="address" label="下单用户" width="280">
            </el-table-column>
            <el-table-column prop="addr" label="合计会员售价">
            </el-table-column>
            <el-table-column prop="money" label="实付总额"> </el-table-column>
            <el-table-column prop="wx" label="支付方式"> </el-table-column>
            <el-table-column prop="type" label="主订单状态"> </el-table-column>
            <el-table-column prop="data" label="下单时间" width="200">
            </el-table-column>
            <el-table-column prop="" label="操作">
              <template slot-scope="scope">
                <el-button class="allbtn" @click="detall(scope.row)"
                  >查看详情</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 弹框 -->
        <el-dialog title="查看详情" :visible.sync="dialogTableVisible">
          <el-form label-width="80px" :model="form" class="forms">
            <!-- <el-form-item label="ID">
              <el-input v-model="form.ID" disabled></el-input>
            </el-form-item>
            <el-form-item label="主订单号">
              <el-input v-model="form.name" disabled></el-input>
            </el-form-item>
            <el-form-item label="下单用户">
              <el-input v-model="form.address" disabled></el-input>
            </el-form-item>
            <el-form-item label="会员售价">
              <el-input v-model="form.addr" disabled ></el-input>
            </el-form-item>
            <el-form-item label="实付总额">
              <el-input v-model="form.money" disabled></el-input>
            </el-form-item>
            <el-form-item label="支付方式">
              <el-input v-model="form.wx" disabled></el-input>
            </el-form-item>
            <el-form-item label="订单状态">
              <el-input v-model="form.type" disabled></el-input>
            </el-form-item>
            <el-form-item label="下单时间">
              <el-input v-model="form.data" disabled></el-input>
            </el-form-item> -->
            <table style="border-color: #ccc; width: 95%" border="1" width>
              <tr>
                <td class="num">ID</td>
                <td class="lefted">{{ form.ID }}</td>
              </tr>
              <tr>
                <td class="num">主订单号</td>
                <td class="lefted">{{ form.name }}</td>
              </tr>
              <tr>
                <td class="num">下单用户</td>
                <td class="lefted">{{ form.address }}</td>
              </tr>
              <tr>
                <td class="num">会员售价</td>
                <td class="lefted">{{ form.addr }}</td>
              </tr>
              <tr>
                <td class="num">实付总额</td>
                <td class="lefted">{{ form.money }}</td>
              </tr>
              <tr>
                <td class="num">支付方式</td>
                <td class="lefted">{{ form.wx }}</td>
              </tr>
              <tr>
                <td class="num">订单状态</td>
                <td class="lefted">{{ form.type }}</td>
              </tr>
              <tr>
                <td class="num">下单时间</td>
                <td class="lefted">{{ form.data }}</td>
              </tr>
            </table>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="auery()">取 消</el-button>
            <!-- <el-button type="primary" @click="confirm()">确 定</el-button> -->
          </div>
        </el-dialog>
        <div class="pagin">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-size="10"
            layout="total, prev, pager, next"
            :total="100"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { li: "首页" },
        { li: "权限" },
        { li: "商城管理" },
        { li: "商品管理" },
        { li: "包钢虚拟币管理" },
        { li: "模板管理" },
        { li: "会员管理" },
        { li: "首页" },
        { li: "权限" },
        { li: "商城管理" },
        { li: "商品管理" },
        { li: "包钢虚拟币管理" },
        { li: "模板管理" },
        { li: "会员管理" },
      ],
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      queryParams: {
        type: "",
        input: "",
        value: "",
      },
      form: {},
      dialogTableVisible: false,
      tableData: [
        {
          ID: "1111",
          data: "2016-05-02 16:38:12",
          name: "79832r4r3562rf4",
          address: "15698547896",
          wx: "微信",
          money: "3000",
          type: "状态",
          addr: "122",
        },
        {
          ID: "2222",
          data: "2016-05-02 16:38:12",
          name: "1256468c4a8r7983",
          address: "15698547896",
          wx: "微信",
          money: "3000",
          type: "状态",
          addr: "122",
        },
        {
          ID: "3333",
          data: "2016-05-02 16:38:12",
          name: "svg12564681256468c4a8r7983",
          address: "15698547896",
          wx: "微信",
          money: "3000",
          type: "状态",
          addr: "122",
        },
        {
          ID: "4444",
          data: "2016-05-02 16:38:12",
          name: "svg1256468c4a8r79832r4r3562rf4",
          address: "15698547896",
          wx: "微信",
          money: "3000",
          type: "状态",
          addr: "122",
        },
        {
          ID: "5555",
          data: "2016-05-02 16:38:12",
          name: "svg1256468c4a8r79832r4r3562rf4",
          address: "15698547896",
          wx: "微信",
          money: "3000",
          type: "状态",
          addr: "122",
        },
        {
          ID: "6666",
          data: "2016-05-02 16:38:12",
          name: "svg1256468c4a8r79832r4r3562rf4",
          address: "15698547896",
          wx: "微信",
          money: "3000",
          type: "状态",
          addr: "122",
        },
        {
          ID: "2222",
          data: "2016-05-02 16:38:12",
          name: "svg1256468c4a8r79832r4r3562rf4",
          address: "15698547896",
          wx: "微信",
          money: "3000",
          type: "状态",
          addr: "122",
        },
        {
          ID: "2222",
          data: "2016-05-02 16:38:12",
          name: "svg1256468c4a8r79832r4r3562rf4",
          address: "15698547896",
          wx: "微信",
          money: "3000",
          type: "状态",
          addr: "122",
        },
        {
          ID: "2222",
          data: "2016-05-02 16:38:12",
          name: "svg1256468c4a8r79832r4r3562rf4",
          address: "15698547896",
          wx: "微信",
          money: "3000",
          type: "状态",
          addr: "122",
        },
      ],
    };
  },
  methods: {
    shopping() {
      console.log(22);
      console.log(this.queryParams.value);
    },
    getRowClass({ rowIndex, columnIndex }) {
      if (rowIndex == 0) {
        return "background:#EFEFEF;";
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    detall(row) {
      // console.log(row, "aa");
      this.dialogTableVisible = true;
      this.form = row;
      console.log(this.form, " this.tableall");
    },
    confirm() {
      this.dialogTableVisible = false;
    },
    auery() {
      this.dialogTableVisible = false;
    },
  },
};
</script>

<style scoped>
div >>> .allbtn {
  background: none;
  border: none;
  color: #86b9e1;
}
.appcnter {
  width: 100%;
  display: flex;
  height: 100%;
}
.cent {
  flex: content;
  /* margin-left: 30px; */
  /* margin-top: 10px; */
  position: relative;
}

.head {
  width: 96%;
  height: 100px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-top: 20px;
  box-sizing: border-box;
  display: flex;
  padding-top: 30px;
  padding-left: 30px;
  position: relative;
  margin-left: 20px;
}
div >>> .el-input__inner {
  width: 200px;
  margin-left: 10px;
  color: #2e363f;
}
.size {
  position: absolute;
  left: 700px;
  display: flex;
}
.btn {
  display: inline-block;
  width: 50px;
  height: 40px;
  background: #3f87c5;
  outline: none;
  border: 1px solid #3f87c5;
  margin-left: 20px;
  box-shadow: 0px 0px 0px 1px #ccc;
}
.btnrefresh {
  display: inline-block;
  width: 50px;
  height: 40px;
  outline: none;
  margin-left: 20px;
  font-size: 20px;
  box-sizing: border-box;
  padding-right: 10px;
}
div >>> .el-icon-search:before {
  content: "\E778";
  color: white;
  font-size: 20px;
  position: relative;
  left: -5px;
  top: -2px;
}
div >>> .el-icon-refresh:before {
  content: "\E6D0";
  position: relative;
  left: -5px;
  top: -2px;
}
div >>> .el-icon-arrow-up:before {
  content: "\E6E1";
  color: black;
  font-weight: 800;
}
.table {
  width: 96%;
  height: 500px;
  margin-top: 30px;
  overflow-y: auto;
  margin-left: 20px;
}
div >>> .el-table th.el-table__cell > .cell {
  display: inline-block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  vertical-align: middle;
  padding-left: 10px;
  padding-right: 10px;
  width: 100%;
  color: #515a6e;
  font-weight: 700;
  text-align: center;
}
div >>> .el-table .cell,
.el-table--border .el-table__cell:first-child .cell {
  padding-left: 10px;
  /* text-align: center; */
}
div >>> .el-button .el-button--default {
  background: none;
}
div >>> .el-table__header-wrapper {
  /* background: red !important; */
}
div >>> .el-table--border .el-table__cell,
.el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
  border-right: 1px solid #e3e3e3 !important;
}
div >>> .el-table th.el-table__cell.is-leaf {
  border-bottom: 1px solid #e3e3e3;
}
.pagin {
  width: 96%;
  height: 50px;
  background: #f5f5f5;
  box-shadow: 0px 0px 3px 0px #ccc;
  margin-top: 40px;
  box-sizing: border-box;
  padding-top: 10px;
  padding-left: 30px;
  position: relative;
  margin-left: 20px;
  /* right: 500px; */
}
.pagin >>> .el-pagination {
  position: absolute;
  right: 10px;
}
.shoppingname {
  display: inline-block;
  width: 80px;
  height: 30px;
  font-size: 14px;
  color: #606266;
  /* background: red; */
  line-height: 35px;
}
.plones {
  font-size: 14px;
  width: 80px;
  color: #606266;
  line-height: 35px;
  margin-left: 20px;
}
.ddh {
  font-size: 14px;
  width: 123px;
  color: #606266;
  margin-left: 30px;
  line-height: 35px;
}
.dhtype {
  font-size: 14px;
  width: 130px;
  color: #606266;
  line-height: 35px;
  position: absolute;
  left: 350px;
  margin-left: 10px;
}
div >>> .el-pagination.is-background .el-pager li {
  /* margin: 0 5px; */
  background-color: #f4f4f5;
  color: #606266;
  min-width: 40px;
  border-radius: 2px;

  border-left: 1px solid #e9e9e9; /* li间距 */
  background: white;
}
div >>> .el-pagination.is-background .el-pager li:nth-child(1) {
  border-left: none !important;
}
div >>> .el-pager {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  list-style: none;
  border: 1px solid #e9e9e9;
  font-size: 0;
  background: white;
  /* border-left: none; */
  padding: 0 !important;
}
div >>> .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #428bca;
  color: #fff;
}
div >>> .el-pagination__total {
  margin-right: 10px;
  font-weight: 400;
  color: #428bca;
}
div >>> div[data-v-00cd70ee] .el-pagination.is-background .el-pager li {
  /* margin: 0 5px; */
  background-color: #f4f4f5;
  color: #428bca;
  min-width: 40px;
  border-radius: 2px;
  border-left: 1px solid #e9e9e9;
  background: white;
}
div >>> .el-icon-arrow-left {
  /* position: absolute;
    left: -10px;
    top: 5px; */
}
.pagin >>> .el-icon-caret-right {
  color: #428bca;
  font-size: 20px;
  position: absolute;
  left: 550px;
  top: 15px;
}
/* div >>> .el-icon-arrow-left:before {
  content: "";
}
div >>> .el-icon-arrow-right:before {
  content: "";
} */
.posire {
  background: #f5f5f5;
  padding-left: 30px;
  padding-top: 10px;
  box-sizing: border-box;
  position: relative;
  height: 40px;
}
.posire >>> .el-icon-caret-left {
  position: absolute;
  left: 10px;
  top: 8px;
  font-size: 16px;
}
div >>> .el-dialog {
  width: 700px;
}
div >>> .forms {
  /* border: 1px solid #e4e7ed; */
  padding-top: 20px;
  box-sizing: border-box;
}

table tr {
  height: 40px;
}
.num {
  text-align: center;
  background-color: #f5f5f5;
}
.lefted {
  text-align: left;
  padding-left: 40px;
}
</style>